import React, { useCallback } from 'react'
import { View, Text, Image } from '@tarojs/components'
import { dataFetch } from '@pier88health/p8h-common'
import DBConfig from '@CONFIG/DBConfig'
import { getHighlightHtml } from '@UTILS/highlight'
import { getPlatform } from '@UTILS/common'
import './FeedCard.scss'
const COVER_IMAGE_WIDTH = 124

export const getCoverImageUrl = item => {
  const {
    CoverImageFileName, GroupId, DateBucket
  } = item
  // eslint-disable-next-line max-len
  return `${DBConfig.staticPostImageUrl}${GroupId}/${DateBucket}/${CoverImageFileName}?x-oss-process=image/resize,w_${Math.floor(COVER_IMAGE_WIDTH * 2)}`
}

export default function FeedCard({
  data = {}, onClick, highlight, containerClass
}) {
  const { Title, FeedItemId } = data
  const onClickCard = useCallback(() => {
    onClick && onClick(FeedItemId, data)
  }, [FeedItemId, data, onClick])
  let highlightHtml = dataFetch.getObjProperty(Title, 'zh')
  if (highlight) {
    highlightHtml = getHighlightHtml(dataFetch.getObjProperty(Title, 'zh'), highlight)
  }
  return (
    <View className={`feed-card ${containerClass}`} onClick={onClickCard}>
      <View className="title-container">
        <Text className="title">{highlightHtml}</Text>
      </View>
      <Image src={getCoverImageUrl(data)} className="coverImage" lazyLoad={!getPlatform().isWeb} mode="aspectFill" />
    </View>
  )
}

FeedCard.defaultProps = {
  highlight: undefined,
  containerClass: '',
}
